<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form
          class="login_form"
          :model="loginForm"
          :rules="rules"
          ref="loginForms"
        >
          <h1>Hello</h1>
          <h2>欢迎来到{{ setting.title }}</h2>
          <el-form-item prop="account">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.account"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="16">
              <el-form-item prop="captcha">
                <el-input
                  :prefix-icon="Compass"
                  v-model="loginForm.captcha"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="code-box">
              <img
                :src="captchaUrl"
                alt=""
                class="codeimg"
                @click="getCaptcha"
              />
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="large"
              @click="handleLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { User, Lock, Compass } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import useUserStore from "@/store/modules/user";
import { useRouter, useRoute } from "vue-router";
import { ElNotification } from "element-plus";
import { getTime } from "@/utlis/time";
import setting from "@/setting";
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
//收集账号密码数据
const loginForm = reactive({
  account: "admin",
  password: "admin",
  captcha: "abcd",
});
const captchaUrl = ref<string>();
//获取验证码图片
const getCaptcha = () => {
  captchaUrl.value =
    import.meta.env.VITE_SERVER + "/captcha.jpg?t=" + new Date();
};
onMounted(() => {
  getCaptcha();
});
//定义变量按钮加载效果
const loading = ref(false);
//登录的回调
const handleLogin = async () => {
  await loginForms.value.validate();
  loading.value = true;
  try {
    await userStore.userLogin(loginForm);
    const redirect: any = route.query.redirect;
    router.push({ path: redirect || "/" });
    ElNotification({
      message: "欢迎回来",
      title: `Hi,${getTime()}好`,
      type: "success",
    });
    loading.value = false;
  } catch (error) {
    ElNotification({
      message: (error as Error).message,
      type: "error",
    });
    loading.value = false;
  }
};
//获取el-form组件
const loginForms = ref();
//自定义校验规则函数
const validateUserName = (rule: any, value: any, callback: any) => {
  console.log(rule);
  if (value === "") {
    callback(new Error("用户名不能为空"));
  } else {
    if (value.length < 5) {
      callback(new Error("用户名至少五位"));
    }
    callback();
  }
};
const validatePassword = (rule: any, value: any, callback: any) => {
  console.log(rule);
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else {
    if (value.length < 5) {
      callback(new Error("密码至少五位"));
    }
    callback();
  }
};
//定义表单校验规则
const rules = {
  username: [{ validator: validateUserName, trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
};
</script>
<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url("@/assets//images/login_bg.jpg") no-repeat center/cover;

  .login_form {
    position: relative;
    width: 80%;
    top: 30vh;
    left: 10%;
    background: #fff;
    border-radius: 10px;
    padding: 40px;

    h1 {
      color: #000;
      font-size: 40px;
    }

    h2 {
      color: #000;
      font-size: 20px;
      margin: 20px 0px;
    }

    .login_btn {
      width: 100%;
    }

    .code-box {
      text-align: right;
    }

    .codeimg {
      height: 32px;
      width: 90%;
      margin-left: 10px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
</style>
